<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-form>
          <el-form-item>
            <el-input placeholder="权限组名称" v-model="selectInfo">
              <template #append>
                <el-button type="primary">搜索</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-button
          @click="this.addGroup = true"
          :disabled="!this.hasAuth('sys:permissions:add')"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      stripe
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        property="name"
        label="权限组名称"
        width="120"
        align="center"
      />
      <!-- <el-table-column property="permName" label="权限" show-overflow-tooltip align="center" /> -->
      <el-table-column align="center" label="操作" width="250">
        <template #default="scope">
          <el-button
            type="text"
            @click="handlePerEdit(scope.row)"
            :disabled="!this.hasAuth('sys:permissions:change')"
            >分配权限</el-button
          >
          <el-button
            type="text"
            @click="handleEdit(scope.row)"
            :disabled="!this.hasAuth('sys:permissions:update')"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.row)"
            :disabled="!this.hasAuth('sys:permissions:delect')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      v-model="drawer"
      title="分配权限"
      :show-close="false"
      style="height: 80%"
    >
      <el-button @click="editPerMenu" type="success">分配</el-button>
      <el-scrollbar max-height="600px">
        <el-tree
          ref="treeRef"
          :data="Tree"
          show-checkbox
          default-expand-all
          node-key="id"
          highlight-current
          :props="defaultProps"
          :check-strictly="true"
        />
      </el-scrollbar>
    </el-drawer>

    <el-drawer
      v-model="GroupEdit"
      title="修改信息"
      :show-close="false"
      @close="this.$refs.FormData.resetFields()"
    >
      <el-form :model="FormData" :rules="rules" ref="FormData">
        <el-form-item prop="name" label="权限组名称">
          <el-input v-model="FormData.name" type="text" />
        </el-form-item>
        <el-form-item
          ><el-button type="primary" @click="groupUpdate('FormData')"
            >修改</el-button
          ></el-form-item
        >
      </el-form>
    </el-drawer>

    <el-drawer
      v-model="addGroup"
      title="添加权限组"
      :show-close="false"
      @close="this.$refs.FormData.resetFields()"
    >
      <el-form :model="FormData" :rules="rules" ref="FormData">
        <el-form-item label="权限组名称" prop="name">
          <el-input v-model="FormData.name" type="text" />
        </el-form-item>
        <el-form-item
          ><el-button type="primary" @click="addGroupSub('FormData')"
            >添加</el-button
          ></el-form-item
        >
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { ElNotification } from "element-plus";
import axios from "../../utils/request";
export default {
  name: "permissions",
  inject: ["reload"], //页面刷新函数
  data() {
    return {
      tableData: [],
      drawer: false,
      selectInfo: "",
      infoEditFrom: {},
      defaultProps: { children: "children", label: "title" },
      GroupEdit: false,
      FormData: {},
      Tree: [],
      currentNodeKey: [],
      addGroup: false,
      permGroupId: 0,
      rules: {
        name: [
          { required: true, message: "权限组名不允许为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handlePerEdit(row) {
      this.permGroupId = row.id;
      //获取当前权限组权限id
      axios
        .get("/permissionGroup/getPermissionGroupOfPerm", {
          params: { id: row.id },
        })
        .then((res) => {
          // console.log(res.data.data.permId);
          //当前权限写入
          this.$refs.treeRef.setCheckedKeys(res.data.data.permId);
        });
      this.drawer = true;
    },
    handleEdit(row) {
      console.log(row);
      this.GroupEdit = true;
      axios
        .get("/permissionGroup/detail", { params: { id: row.id } })
        .then((res) => {
          // console.log(res.data);
          this.FormData = res.data.data.permissionGroupInfo;
        });
    },
    getPermissionGroup() {
      axios.get("/permissionGroup/info").then((res) => {
        this.tableData = res.data.data.info;
      });
    },
    groupUpdate(val) {
      this.$refs.FormData.validate((valid) => {
        if (valid) {
          axios.post("/permissionGroup/update", this.FormData).then((res) => {
            ElNotification.success(res.data.message);
            this.reload();
          });
        } else {
          return false;
        }
      });
    },
    handleDelete(row) {
      axios
        .get("/permissionGroup/delete", { params: { id: row.id } })
        .then((res) => {
          ElNotification.success(res.data.message);
          this.reload();
        });
    },
    getMenuPermissionInfo() {
      axios.get("/allPermission").then((res) => {
        // console.log(res);
        this.Tree = res.data.data.menu;
      });
    },
    editPerMenu() {
      if (this.permGroupId == 0) return;
      axios
        .post(
          "/permissionGroup/permissionGroup/" + this.permGroupId,
          this.$refs.treeRef.getCheckedKeys()
        )
        .then((res) => {
          console.log(res.data.data);
          ElNotification.success(res.data.message);
          this.reload();
        });
      this.permGroupId = 0;
    },
    addGroupSub(val) {
      this.$refs.FormData.validate((valid) => {
        if (valid) {
          axios
            .post("/permissionGroup/insertInfo", this.FormData)
            .then((res) => {
              ElNotification.success(res.data.message);
              this.reload();
            });
          this.FormData = [];
        } else {
          return false;
        }
      });
    },
    hasAuth(perm) {
      var authority = this.$store.state.menus.permList;
      return authority.indexOf(perm) > -1;
    },
  },
  mounted() {
    this.getPermissionGroup();
    this.getMenuPermissionInfo();
  },
};
</script>



